<template>
  <div class="u-container">
    <div class="searcher">
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left">
        <a-row>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="角色名称：">
              <a-input v-model:value="formState.username" placeholder="角色名称" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-tooltip>
                <template #title>刷新将会清空搜索条件。</template>
                <a-button type="primary" style="margin-right: 20px" @click="handleRefresh">
                  <template #icon><ReloadOutlined /></template>刷新
                </a-button>
              </a-tooltip>
              <a-button type="primary" @click="handleSearch">
                <template #icon><SearchOutlined /></template>查询
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table_main">
      <dynamic-table
        ref="tableRef"
        :columns="columns"
        :get-list-func="getSysRolePage"
        rowKey="id"
        :row-selection="null"
      >
        <!-- 表格的操作按钮插槽 -->
        <template #title>
          <a-button type="primary" style="margin-right: 20px" @click="addItem">
            <template #icon><PlusOutlined /></template>新增
          </a-button>
        </template>
      </dynamic-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRaw } from 'vue';
import { DynamicTable } from '@/components/dynamic-table';
import { columns } from './columns';
import { getSysRolePage } from '@/api/system/role';
import { useFormModal } from '@/hooks/useFormModal';
import { getFormSchema } from './form-schema';
import { ReloadOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
const tableRef = ref<any>(null);
const roleName = ref('');
const formState = ref({});
const labelCol = { span: 7 };
const wrapperCol = { span: 14 };
const handleSearch = () => {
  const params = {
    roleName: roleName.value
  };
  tableRef.value.refreshTableData(params);
};
const handleRefresh = () => {
  roleName.value = '';
  tableRef.value.refreshTableData({ pageSize: 10, pageStart: 1 });
};

// 添加角色
const addItem = () => {
  useFormModal({
    title: '添加角色',
    formSchema: getFormSchema(),
    handleOk: async (modelRef) => {
      const params = {
        ...toRaw(modelRef)
      };
      params.menuIds = params.menuIds.filter((_) => _ && _.length != 0);
      tableRef.value.refreshTableData({ pageSize: 10, pageStart: 1 });
    }
  });
};
</script>
